<template>
    <div>
        <Shortcut></Shortcut>
        <div class="profile">
            <div class="header">
                <div class="title">
                    <div class="logo">
                        <Logo></Logo>
                    </div>
                    <div class="shop-name">慕西商城</div>
                    <div class="name">个人中心</div>
                    <div class="cart">
                        <shopCart></shopCart>
                </div>
            </div>
            </div>
            <div class="main-menu">
                <div class="content">
                    <div class="left-menu">
                        <div class="basic" :class="{active_menu:activeIndex === 1}"
                        @click=changeComponent(1)
                        >基本信息</div>
                        <div class="address" :class="{active_menu:activeIndex === 2}"
                        @click="changeComponent(2)"
                        >地址管理</div>
                        <div class="order" :class="{active_menu:activeIndex === 3}"
                        @click="changeComponent(3)"
                        >我的订单</div>
                        <div class="security" :class="{active_menu:activeIndex === 4}"
                        @click="changeComponent(4)"
                        >安全设置</div>
                    </div>
                    <div class="right-menu">
                        <component :is="activeComponentName"></component>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Logo from '@/components/common/Logo.vue'
    import ShopCart from '@/components/home/ShopCart.vue'
    import Shortcut from '@/components/common/Shortcut.vue'
    import { ref,onMounted } from 'vue'
    import { useRouter,useRoute } from 'vue-router'
    import BasicInfo from '@/components/Profile/BasicInfo.vue'
    import AddressManager from '@/components/Profile/AddressManager.vue'
    import MyOrder from '@/components/Profile/MyOrder.vue'
    import SecuritySettings from '@/components/Profile/SecuritySettings.vue'

    export default {
        name:'Profile',
        setup() {
            const router = useRouter()
    const route = useRoute()

    let activeComponentName = ref("BasicInfo")
    
    let activeIndex = ref(1)

    let activeComponent = ref([
        {index:1,componentName:'BasicInfo'},
        {index:2,componentName:'AddressManager'},
        {index:3,componentName:'MyOrder'},
        {index:4,componentName:'SecuritySettings'}
    ])

    const changeComponent = (index) => {
        activeIndex.value = index
        activeComponentName.value = activeComponent.value[index - 1].componentName
        router.push(
            '/profile?activeIndex=' + index
        )
    }




    onMounted(() => {
        activeIndex.value = route.query.activeIndex
        activeComponentName.value = activeComponent.value[activeIndex.value - 1].componentName
    })  

    return {
        activeComponentName,
        activeIndex,
        activeComponent,
        changeComponent,
    }
        },
        components:{
            BasicInfo,
            AddressManager,
            MyOrder,
            SecuritySettings,
            ShopCart,
            Shortcut,
            Logo
        }
    }



    


</script>

<style lang="less" scoped>
    .profile {
        .header {
            border-bottom: 2px solid #f00c0c;
            height: 120px;
            line-height: 120px;
        }
        .main-menu {
            background-color: #f5f5f5;
            .content {
                width: var(--content-width);
                margin: 0 auto;
                display: flex;
                .left-menu {
                    margin-top: 20px;
                    color: #333;
                    font-size: 14px;
                    height: 800px;
                    div {
                        margin-top: 20px;
                        border-bottom: 1px solid #f5f5f5;
                        &:hover {
                            cursor: pointer;
                            color: #f00c0c;
                            border-bottom: 1px solid #f00c0c;
                        }
                    }
                }
                .right-menu {
                    margin-top: 40px;
                    margin-left: 20px;
                    //background-color: #fff;
                }
            }
            .active_menu {
                color: #f00c0c;
            }
        }
    }


    .title {
            display: flex;
            width: 1000px;
            margin: 0 auto;
            // border: 1px solid;
            height: 80px;
            line-height: 80px;

            .logo {
                // border: 1px solid;
                height: 40px;
            }
            .shop-name {
                font-size: 40px;
                font-weight: 700;
                margin-left: 10px;
                margin-top: 30px;
                color: #f00c0c;
            }
            .name {
                font-size: 25px;
                margin-left: 10px;
                margin-top: 30px;
            }
            .cart {
                // border: 1px solid;
                flex: 1;
                display: flex;
                justify-content: right;
            }

        }

        

</style>